import React, { Component } from 'react';
import { List, Button, WingBlank, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import axios from 'axios';

class Avatar extends Component {
	constructor (props) {
		super (props)
		this.state = {
			username: localStorage.getItem("username"),
			// avatar: document.querySelector('.am-input-control input').value,
			message: ''
		}
	}
	goback () {
		this.props.history.push('/personal');
	}
	sure () {
		let username = localStorage.getItem("username")
		let ava = document.querySelector('.am-input-control input').value
		console.log(username, ava)
		axios.post('/users/setavatar',{username:username,avatar:ava})
			.then((data) => {
				this.showToast('昵称修改成功！');
				this.props.history.push('/Personal')
			})
	}
	showToast(tex) {
		Toast.info(tex);
	}
	getData () {
		this.setState({
		  message: this.refs.tip.value
		})
	  }
// 	componentDidMount () {
// 		console.log(document.querySelector('.am-input-control input').value)
// 		if(document.querySelector('.am-input-control input').value === ''){
// 			document.querySelector('.sure-avatar').setAttribute('class','am-button relog sure-avatar am-button-warning am-button-disabled')
// 		}else {
// 			document.querySelector('.sure-avatar').removeAttribute('class','am-button-disabled') 
// 			// document.querySelector('.sure-avatar').aria-disabled = 'false'
// 		}
// 	}
	render() {
		return (
			<div className="container">
				<div className="box set-box">
					<div className="header set-header">
						<i className="iconfont icon-left-copy" onClick={this.goback.bind(this)}> 修改昵称</i>
					</div>
					<div className="set-content content">
						<div className="tips1">
							<p>为了更好的购物,请取一个昵称吧</p>
						</div>
						<List>
						  <InputItem
							ref="tip"
							onChange={ this.getData.bind(this)}
							clear
							placeholder="请输入昵称"
						  ></InputItem>
						</List>
						<div className="tips2">
							<p>1.昵称非登录用户名</p>
							<p>2.昵称由中英文和数字组成,格式为3-50个字符,1个中文字为2个字符。</p>
						</div>
						<WingBlank>
							<Button className="relog sure-avatar" 
							ref={(Button) => { this.Button = Button; }}
							onClick={this.sure.bind(this)}
							type="warning">确认</Button>
						</WingBlank>
					</div>
				</div>
			</div>
		)
	}
}
		
const AvatarWrapper = createForm()(Avatar);		
export default AvatarWrapper;